<template>
  <div>
    <div>
      <input class="ipt" ref="ipt" type="text" placeholder="请输入名称" @keydown.enter="showBox">
    </div>
    <MyTable v-if="isShow" :data="tableData" :column="column" index @selectionChange="change">
      <template v-slot:operation="{ prop }">
        <el-button type="primary" size="mini" @click="edit(prop, 1)">编辑</el-button>
        <el-button type="primary" size="mini" @click="edit(prop, 2)">新增</el-button>
        <el-button type="primary" size="mini" @click="del(prop)">删除</el-button>
      </template>
      <template v-slot:input>
        <el-input v-model="age" placeholder="请输入年龄" size="normal" clearable></el-input>
      </template>
    </MyTable>
    <div class="box" :class="mood">{{ msg }}</div>
    <button @click="changeMood">切换</button>
    <br><br>
    <!-- 筛选列表 -->
    <input ref="ipt1" v-model="person" type="text" @input="changeVal">
    <ul>
      <li v-for="(item, index) of perList" :key="index">
        {{ item.name }}--{{ item.age }}
      </li>
    </ul>
    <el-dialog
      :title="num===1 ? '编辑': '新增'"
      :visible.sync="showDialog"
      width="50%"
      @close="closeDia">
      <el-form :model="form" ref="form" :rules="rules" label-width="80px" :inline="false" size="normal">
        <el-form-item label="地址">
          <el-input v-model="form.address"></el-input>
        </el-form-item>
        <el-form-item label="日期">
          <el-date-picker
            v-model="form.date"
            style="width: 100%"
            type="date"
            placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="姓名">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="类型">
          <el-select v-model="form.type" style="width: 100%" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      
      <span slot="footer">
        <el-button @click="showDialog = false">取消</el-button>
        <el-button type="primary" @click="submit">确定</el-button>
      </span>
    </el-dialog>
    
  </div>
</template>

<script>
export default {
  name: 'Pd',
  data() {
    return {
      num: '',
      form: {
        address: '',
        date: '',
        type: '',
        name: ''
      },
      rules: {},
      options: [
        { value: 0, label: '上班族'},
        { value: 1, label: '学生'}
      ],
      showDialog: false,
      age: '',
      tableDatas: [{
          id: '12987122',
          name: '王小虎',
          amount1: '234',
          amount2: '3.2',
          amount3: 10
        }, {
          id: '12987123',
          name: '王小虎',
          amount1: '165',
          amount2: '4.43',
          amount3: 12
        }, {
          id: '12987124',
          name: '王小虎',
          amount1: '324',
          amount2: '1.9',
          amount3: 9
        }, {
          id: '12987125',
          name: '王小虎',
          amount1: '621',
          amount2: '2.2',
          amount3: 17
        }, {
          id: '12987126',
          name: '王小虎',
          amount1: '539',
          amount2: '4.1',
          amount3: 15
        }],
      msg: '测试',
      mood: 'happy',
      person: '',
      isShow: false,
      list: [
        { name: '周杰伦', age: 30, sex: '男' },
        { name: '周东玉', age: 30, sex: '男' },
        { name: '周润东', age: 30, sex: '男' },
        { name: '何润东', age: 30, sex: '男' },
        { name: '方伦山', age: 30, sex: '男' }

      ],
      perList: [],
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        type: 0,
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        type: 1,
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        type: 0,
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        type: 1,
        address: '上海市普陀区金沙江路 1516 弄'
      }],
      column: [
        { label: '日期', prop: 'date' },
        { label: '姓名', prop: 'name', width: 150 },
        { label: '地址', prop: 'address' },
        { label: '类型', prop: 'type', type: 'function', callback: (row) => { return this.map(row.type) } },
        { label: '操作', type: 'slot', name: 'operation', width: 300 },
        { label: '测试', type: 'slot', name: 'input', prop: 'value' }
      ]
    }
  },
  methods: {
    closeDia() {
      this.showDialog = false
      for (const key in this.form) {
        this.form[key] = ''
      }
    },
    edit(prop, num) {
      this.showDialog = true
      this.num = num
      if (num === 1) {
        for (const key in prop) {
          if (this.form.hasOwnProperty(key)) {
            this.form[key] = prop[key]
          }
        }
      }
    },
    submit() {},
    showBox () {
      console.log('回车事件')
      this.$refs.ipt.blur()
      this.$refs.ipt1.focus()
    },
     arraySpanMethod({ row, column, rowIndex, columnIndex }) {
      console.log(row,column,rowIndex,columnIndex,'??????')
        if (rowIndex % 2 === 0) {
          if (columnIndex === 0) {
            return [1, 2];
          } else if (columnIndex === 1) {
            return [0, 0];
          }
        }
      },

      objectSpanMethod({ row, column, rowIndex, columnIndex }) {
        if (columnIndex === 0) {
          if (rowIndex % 3 === 0) {
            return {
              rowspan: 3,
              colspan: 1
            };
          } else {
            return {
              rowspan: 0,
              colspan: 0
            };
          }
        }
      },
    changeVal (val) {
      this.perList = this.list.filter((item) => {
        return item.name.indexOf(this.person) !== -1
      })
    },
    map(data) {
      const obj = {
        1: '学生',
        0: '上班族'
      }
      return obj[data]
    },
    changeMood () {
      const index = Math.floor(Math.random() * 3)
      const arr = ['happy', 'sad', 'normal']
      this.mood = arr[index]
      this.isShow = !this.isShow
    },
    del (data) {
      console.log(data)
    },
    dddd () {
      console.log(123)
    },
    change(val) {
      console.log('全选', val)
    }
  }
}
</script>

<style lang="scss" scoped>
.ipt {
  margin-bottom: 30px;
}
.box {
  width: 200px;
  height: 100px;
  border: 1px solid black;
}
.happy {
  background-color: pink;
}
.sad {
  background-color: #eee;
}
.normal {
  background-color: #8df;
}
</style>
